<template>
    <div class="shoppingCart">
        <el-button size="small" @click="goBack">返回</el-button>
        <div class="flex">
            <h2 v-for="(item, index ) in tabs" :key="index" style="margin: 10px 20px 0 0;cursor: pointer;" :style="{color: activeIndex == index? '#000' : '#989898'}" @click="handerTabs(index)">{{ item }}</h2>
        </div>
        <div class="shoppingCart-header">
            <el-card :body-style="{
            padding: '10px 40px'
        }">
                <div class="flex flex-center">
                    <el-avatar :size="100" fit="cover "
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
                    <div class="header-info" style="margin-left: 20px;">
                        <p>用户名：xxxx</p>
                        <p>所属单位：xxxx</p>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="shoppingCart-tabs" v-if="activeIndex ==0">
            <el-card :body-style="{
            padding: '10px 40px'
        }">
                <div class="shoppingCart-btns flex flex-space-between flex-center" style="margin-bottom: 20px;">
                    <span style="color: #006569; font-size: 16px;font-weight: 700;">共X张数据表</span>
                    <div class="flex">
                        <el-button size="small" type="primary">提交申请</el-button>
                        <!-- <el-button size="small">模板导入</el-button>
                        <el-button size="small">模板下载</el-button> -->
                        <el-button size="small" type="danger" icon="el-icon-delete">选中删除</el-button>
                    </div>
                </div>
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ fontSize: '16px', backgroundColor: '#f8f8f8', color: '#333' }">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" align="center" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="表英文名" >
                        <template slot-scope="scope">
                            <span style="color: #006569;">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="表中文名">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="数据路径">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="归属系统/一级日录">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="数据库/数据来源">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="所属专业">
                    </el-table-column>
                </el-table>
                <div class="table-page flex flex-end">
                    <el-pagination :page-size="100" layout="prev, pager, next, jumper" :total="1000">
                    </el-pagination>
                </div>
            </el-card>
        </div>
        <div class="shoppingCart-tabs" v-else>
            <el-card :body-style="{
            padding: '10px 40px'
        }">
                <div class="shoppingCart-btns flex flex-space-between flex-center" style="margin-bottom: 20px;">
                    <span style="color: #006569; font-size: 16px;font-weight: 700;">共X张数据表</span>
                </div>
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ fontSize: '16px', backgroundColor: '#f8f8f8', color: '#333' }">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" align="center" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="表英文名" >
                        <template slot-scope="scope">
                            <span style="color: #006569;">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="表中文名">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="数据路径">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="归属系统/一级日录">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="数据库/数据来源">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="所属专业">
                    </el-table-column>
                    <el-table-column prop="date" align="center" label="申请状态">
                    </el-table-column>
                </el-table>
                <div class="table-page flex flex-end">
                    <el-pagination :page-size="100" layout="prev, pager, next, jumper" :total="1000">
                    </el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabs: ['我的购物车','我的申请'],
            activeIndex: 0,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
            }
            ]
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        handerTabs(index) {
            this.activeIndex = index
        }
    }
}

</script>
<style lang="less" scoped>
.shoppingCart-header {
    margin: 20px 0;
}

.header-info {
    font-size: 14px;
    font-weight: 700;

    p {
        &:first-child {
            margin-bottom: 10px;
        }
    }
}

/deep/.el-button--small {
    padding: 9px 30px;
}
</style>